﻿
<div class="bui-page">
	<header class="bui-bar">
		<div class="bui-bar-left">
            <a class="bui-btn btn-back"><i class="icon-back"></i></a>
			
		</div>
		<div class="bui-bar-main">列表</div>
		<div class="bui-bar-right">
		</div>
	</header>
	<main>
		<h3 class="section-title">普通文本列表</h3>
		<ul class="bui-list">
			<li class="bui-btn">
				列表2
			</li>
			<li class="bui-btn">
				列表2
			</li>
		</ul>
		<div class="bui-panel">
			<div class="bui-panel-head"><strong>示例:</strong></div>
			<div class="bui-panel-main">
				<div class="container">
				<h4>html:</h4>
				<xmp>
<ul class="bui-list">
  <li class="bui-btn">
    列表2
  </li>
  <li class="bui-btn">
    列表2
  </li>
</ul>
			 	</xmp>
				</div>
			</div>
		</div>
		<h3 class="section-title">右边图标</h3>
		<ul class="bui-list">
			<li class="bui-btn bui-box">
				<div class="span1">列表2</div>
				<i class="icon-listright"></i>
			</li>
			<li class="bui-btn bui-box">
				<div class="span1">列表2</div>
				<div class="bui-badges">15</div>
				<i class="icon-listright"></i>
			</li>
		</ul>

		<div class="bui-panel">
			<div class="bui-panel-head"><strong>示例:</strong></div>
			<div class="bui-panel-main">
				<div class="container">
				<h4>html:</h4>
				<xmp>
<ul class="bui-list">
  <li class="bui-btn bui-box">
    <div class="span1">列表2</div>
    <i class="icon-listright"></i>
  </li>
  <li class="bui-btn bui-box">
    <div class="span1">列表2</div>
    <div class="bui-badges">15</div>
    <i class="icon-listright"></i>
  </li>
</ul>
			 	</xmp>
				</div>
			</div>
		</div>
		<h3 class="section-title">分栏标题</h3>
		<ul class="bui-list">
			<li class="bui-btn bui-btn-title">
				A
			</li>
			<li class="bui-btn bui-box">
				<div class="span1">列表2</div>
				<i class="icon-listright"></i>
			</li>
			<li class="bui-btn bui-box">
				<div class="span1">列表2</div>
				<i class="icon-listright"></i>
			</li>
			<li class="bui-btn bui-btn-title">
				B
			</li>
			<li class="bui-btn bui-box">
				<div class="span1">列表2</div>
				<i class="icon-listright"></i>
			</li>
		</ul>
		<div class="bui-panel">
			<div class="bui-panel-head"><strong>示例:</strong></div>
			<div class="bui-panel-main">
				<div class="container">
				<h4>html:</h4>
				<xmp>
<ul class="bui-list">
  <li class="bui-btn bui-btn-title">
    A
  </li>
  <li class="bui-btn bui-box">
    <div class="span1">列表2</div>
    <i class="icon-listright"></i>
  </li>
  <li class="bui-btn bui-btn-title">
    B
  </li>
    <li class="bui-btn bui-box">
    <div class="span1">列表2</div>
    <i class="icon-listright"></i>
  </li>
</ul>
			 	</xmp>
				</div>
			</div>
		</div>
		<h3 class="section-title">左右边图标</h3>
		<ul class="bui-list">
			<li class="bui-btn bui-box">
				<div class="icon"><img src="images/applogo.png" alt=""></div>
				<div class="span1">列表2</div>
				<i class="icon-listright"></i>
			</li>
			<li class="bui-btn bui-box">
				<div class="icon"><img src="images/applogo.png" alt=""><span class="bui-badges"></span></div>
				<div class="span1">列表3</div>
				<i class="icon-listright"></i>
			</li>
		</ul>
		<div class="bui-panel">
			<div class="bui-panel-head"><strong>示例:</strong></div>
			<div class="bui-panel-main">
				<div class="container">
				<h4>html:</h4>
				<xmp>
<ul class="bui-list">
  <li class="bui-btn bui-box">
    <div class="icon"><img src="images/applogo.png" alt=""></div>
    <div class="span1">列表2</div>
    <i class="icon-listright"></i>
  </li>
  <li class="bui-btn bui-box">
    <div class="icon"><img src="images/applogo.png" alt=""><span class="  bui-  badges"></span></div>
    <div class="span1">列表3</div>
    <i class="icon-listright"></i>
  </li>
</ul>
			 	</xmp>
				</div>
			</div>
		</div>
		<h3 class="section-title">图文列表</h3>
		<ul class="bui-list">
			<li class="bui-btn bui-box">
				<div class="thumbnail"><img src="images/applogo.png" alt=""></div>
				<div class="span1">
					<h3 class="item-title">群助手</h3>
					<p class="item-text">8个群有新消息</p>
				</div>
				<i class="icon-listright"></i>
			</li>
			<li class="bui-btn bui-box">
				<div class="thumbnail"><img src="images/applogo.png" alt=""><span class="bui-badges">10</span></div>
				<div class="span1">
					<h3 class="item-title">我的电脑</h3>
					<p class="item-text">你已在电脑登录,可传文件到电脑</p>
				</div>
				<i class="icon-listright"></i>
			</li>
		</ul>

		<div class="bui-panel">
			<div class="bui-panel-head"><strong>示例:</strong></div>
			<div class="bui-panel-main">
				<div class="container">
				<h4>html:</h4>
				<xmp>
<ul class="bui-list">
  <li class="bui-btn bui-box">
    <div class="thumbnail"><img src="images/applogo.png" alt=""></div>
    <div class="span1">
      <h3 class="item-title">群助手</h3>
      <p class="item-text">8个群有新消息</p>
    </div>
    <i class="icon-listright"></i>
  </li>
  <li class="bui-btn bui-box">
    <div class="thumbnail"><img src="images/applogo.png" alt=""><span class  ="  bui-badges">10</span></div>
    <div class="span1">
      <h3 class="item-title">我的电脑</h3>
      <p class="item-text">你已在电脑登录,可传文件到电脑</p>
    </div>
    <i class="icon-listright"></i>
  </li>
</ul>
			 	</xmp>
				</div>
			</div>
		</div>
		<h3 class="section-title">复杂图文列表</h3>
		<ul class="bui-list">
			<li class="bui-btn bui-box">
				<div class="thumbnail"><img src="images/applogo.png" alt=""></div>
				<div class="span1">
					<h3 class="item-title">群助手<span class="time bui-right">10:05</span></h3>
					<p class="item-text">8个群有新消息</p>
				</div>
				<i class="icon-listright"></i>
			</li>
			<li class="bui-btn bui-box">
				<div class="thumbnail"><img src="images/applogo.png" alt=""></div>
				<div class="span1">
					<h3 class="item-title">我的电脑<span class="time bui-right">10:05</span></h3>
					<p class="item-text">你已在电脑登录,可传文件到电脑</p>
				</div>
				<i class="icon-listright"></i>
			</li>
		</ul>
		<div class="bui-panel">
			<div class="bui-panel-head"><strong>示例:</strong></div>
			<div class="bui-panel-main">
				<div class="container">
				<h4>html:</h4>
				<xmp>
<ul class="bui-list">
  <li class="bui-btn bui-box">
    <div class="thumbnail"><img src="images/applogo.png" alt=""></div>
    <div class="span1">
      <h3 class="item-title">群助手<span class="time bui-right">10:05</span>
      </h3>
      <p class="item-text">8个群有新消息</p>
    </div>
    <i class="icon-listright"></i>
  </li>
  <li class="bui-btn bui-box">
    <div class="thumbnail"><img src="images/applogo.png" alt=""></div>
    <div class="span1">
      <h3 class="item-title">我的电脑<span class="time bui-right">10:05</span></h3>
      <p class="item-text">你已在电脑登录,可传文件到电脑</p>
    </div>
    <i class="icon-listright"></i>
  </li>
</ul>
			 	</xmp>
				</div>
			</div>
		</div>
	</main>
</div>
